<template>
  <div class="sub-filter" v-if="filterData">
    <!-- 品牌 -->
    <div class="item">
      <div class="head">品牌：</div>
      <div class="body">
        <a :class="{ active: filterData.brands.selectBrandId === item.id }" @click="changeBrand(item.id)"
          href="javascript:;" v-for="item in filterData.brands" :key="item.id">{{ item.name }}</a>
      </div>
    </div>
    <!-- 规格 -->
    <div class="item" v-for="item in filterData.saleProperties" :key="item.id">
      <div class="head">{{ item.name }}：</div>
      <div class="body">
        <a :class="{ active: item.selectPropId === prop.id }" @click="changeAttr(item, prop.id)" href="javascript:;"
          v-for="prop in item.properties" :key="prop.id">{{ prop.name }}</a>
      </div>
    </div>
</div>
</template>
<script>
import { findSubCategoryFilter } from '@/api/category'
import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'
export default {
  name: 'SubFilter',
  setup(props, { emit }) {
    const route = useRoute()
    const filterData = ref(null)
    const getSubFilterData = () => {
      findSubCategoryFilter(route.params.id).then(({ result }) => {
        // 给规格和品牌数据前面都加一个全部
        // 品牌
        result.brands.unshift({ id: null, name: '全部' })
        // 默认选中的品牌
        result.brands.selectBrandId = ref(null)
        // 属性
        result.saleProperties.forEach(item => {
          // 默认选中的属性
          item.selectPropId = ref(null)
          item.properties.unshift({ id: null, name: '全部' })
        })
        filterData.value = result
      })
    }
    // 监听二级分类id的变化
    watch(() => route.params.id, (newVal) => {
      if (newVal && (route.path === `/cate/sub/${route.params.id}`)) {
        getSubFilterData()
      }
    }, { immediate: true })

    // 改变品牌条件
    const changeBrand = (brandId) => {
      // 如果当前品牌已经是选中了，再点击选中，就不要再发送网络请求
      if (filterData.value.selectBrandId === brandId) return
      filterData.value.brands.selectBrandId = brandId
      emit('filter-change', getFilterData())
    }
    // 改变属性数据
    const changeAttr = (item, attrId) => {
      item.selectPropId = attrId
      emit('filter-change', getFilterData())
    }

    // 定义获取筛选条件的方法
    const getFilterData = () => {
      const obj = {}
      const attrs = []
      // 品牌id
      obj.brandId = filterData.value.brands.selectBrandId
      // 属性的数组
      filterData.value.saleProperties && filterData.value.saleProperties.forEach(item => {
        const attr = item.properties.find(prop => prop.id === item.selectPropId)
        if (attr && attr.id !== null) { // 如果没有选择属性（attr没有数据），选择了属性，但是选择是全部，也不应该给attr赋值
          attrs.push({ groupName: item.name, propertyName: attr.name })
        }
      })
      if (attrs.length > 0) obj.attrs = attrs
      return obj
    }
    return { filterData, changeBrand, changeAttr }
  }
}
</script>
<style scoped lang='less'>
.sub-filter {
  background: #fff;
  padding: 25px;

  .item {
    display: flex;
    line-height: 40px;

    .head {
      width: 80px;
      color: #999;
    }

    .body {
      flex: 1;

      a {
        margin-right: 36px;
        transition: all .3s;
        display: inline-block;

        // 点击哪个品牌时显示颜色
        &.active,
        &:hover {
          color: @xtxColor;
        }
      }
    }
  }
}
</style>